<template>
    <view class="cardWrap">
        <view class="top-20" v-for="(item, index) in list" :key="index">
            <view class="titleWrap bottom-10 bg-yellow-opacity flex">
                <view class="flex">
                    <text class="fontBold">{{ item.title }}</text>
                </view>
                <view class="flex">
                    <text class="productNum icon bg"></text>
                    <text class="col-grey font13 left-3" v-if="item.list.length > 0">{{item.list.length}}个楼盘</text>
                </view>
            </view>
            <block v-if="item.list.length > 0">
                <view class="productRow flex" v-for="prod in item.list" :key="prod.id" @click="toProduct(prod)">
                    <view class="title txtHidden font13 fontBold">{{ prod.title }}</view>
                    <view class="amount txtHidden text-center">{{filterAmount(prod.price) }}</view>
                    <view class="size txtHidden text-center">{{prod.size?'面积'+prod.size:'/'}}</view>
                    <view class="status text-right txtHidden">{{ prod.sell_type_display }}</view>
                </view>
            </block>
        </view>
    </view>
</template>

<script>
	export default {
        data() {
            return {
            }
        },
        props:{
            list: {
                value: Array,
                default: []
            }
		},
        
        methods:{
            filterAmount(arr){
                let minPrice = arr[0] ? (arr[0] / 10000).toFixed(1) : 0;
                let maxPrice = arr[1] ? (arr[1] / 10000).toFixed(1) : 0;
                return `${minPrice?minPrice:''}${maxPrice?'-'+maxPrice:'/'}${minPrice || maxPrice ? '万':''}`
            },
            toProduct(row) {
                uni.navigateTo({
                    url: `/pages/product/detail/index?productId=${row.id}&title=${row.title}`
                })
            }
        }
    }
</script>

<style scoped lang="scss">
.cardWrap{
    margin: 28rpx;
    .titleWrap{
        padding: 10rpx;
        justify-content: space-between;
        .productNum{
            display: inline-block;
            width: 34rpx;
            height: 24rpx;
            background-image: url("https://image.srea.org.cn/xcx/icon/find-plate-products-count.png");
        }
    }
    .productRow{
        justify-content: space-between;
        padding: 20rpx 0;
        .title{
            width: 25%;
        }
        .amount{
            width: 25%;
        }
        .size{
            width: 32%;
        }
        .status{
            width: 18%;
        }
    }
}
</style>
